<template>
	<u-popup bgColor='transparent' :show='show' mode='top' @open='open' @close='close'>
		<view class="bg">
			<scroll-view class="share" scroll-y="true" :style="{height:height+'px'}">
				<view class="share-container flex flex-center" style="height: 100%;">
					<view id='product-poster' class="poster br-8 bg-color-white">
						<image class="br-8" :src="$ossUrl+product.main_image" style="width: 634rpx;" mode="widthFix">
							</w-image>
							<view class="flex flex-js-sb ptb-12 plr-16">
								<view class="">
									<view class="font-color-dark price">
										<text class="font-size-16">￥</text>
										<text class="font-size-24">{{product.price}}</text>
									</view>
									<view class="font-color-dark mt-4 mb-12 font-size-14">{{product.name}}</view>
									<view class="flex flex-ai-center">
										<image :src="$ossUrl+appConfig.appLogo" mode="" style="width: 40rpx;height: 40rpx;">
										</image>
										<text class="font-color-dark ml-4 font-size-14 font-w-500">{{appConfig.appName}}</text>
									</view>
								</view>
								<view class="flex flex-dir-col flex-ai-center">
									<image class="br-8" v-if="qrCode" style="width: 180rpx;height: 180rpx;" :src="qrCode" mode=""></image>
									<view v-if="product.is_group_sharing == 1" class="font-size-10 font-color-theme">扫二维码参与拼团</view>
								</view>
							</view>   
					</view> 
				</view>
			</scroll-view>  
			<view class="action ">
				<!-- <view v-if="product.is_group_sharing == 1" @click="$tools.copyText(H5Url + fullUrl)" class="mb-30 text-center font-color-theme" style="width: 100%;">复制拼团链接</view> -->
				<view class="flex flex-js-sa">
					<!-- #ifdef APP -->
					<view class="flex flex-center flex-dir-col font-color-textPrimary"  data-action='share' @click="poster.save">
						<w-icon name="wechat" size="46"></w-icon>
						<text class="font-size-10 mt-8">微信</text>
					</view>
					<!-- #endif -->
					
					<view v-if="product.is_group_sharing == 1" @click="$tools.copyText(H5Url + fullUrl)" class="flex flex-center flex-dir-col font-color-textPrimary" data-action='saveImage'>
						<w-icon name="copy-ring" size="46"></w-icon>
						<text class="font-size-10 mt-8" >复制拼团链接</text>
					</view>
					<view class="flex flex-center flex-dir-col font-color-textPrimary" data-action='saveImage' @click="poster.save">
						<w-icon name="download2" size="46"></w-icon>
						<text class="font-size-10 mt-8" >保存海报</text>
					</view>
				</view>
				<!-- <w-button @click="$tools.copyText(H5Url + fullUrl)" size="mini">复制邀请链接</w-button> -->
				<view class="flex flex-center mt-32">
					<w-icon name='close4' size="24" @click='close'></w-icon>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {
		ApiHost,
		H5Url
	} from '@/config/index.js'
	import {
		mapState
	} from 'vuex'
	import {base64ToPath } from 'image-tools'
	export default {
		name: "w-product-share",
		props: {
			show: {
				type: true,
				default: true
			},
			product: {
				type: Object,
				default () {
					return {
						goods_type: 1,
						list_image: null,
						main_image: null
					}
				}
			},
			shareSrc:{
				type:String,
				default:''
			}
		},
		model: {
			prop: 'show',
			event: "change"
		},
		computed: {
			qrCode() {
				if(this.fullUrl&&this.userInfo.inviter_code){
						return `${ApiHost}/addons/qrcode/index/build?text_type=collection&text=${this.userInfo.inviter_code}&t=${new Date().getTime()}&url=${encodeURIComponent(this.fullUrl)}`
				}
				return null;
			}
		},
	
		data() {
			return {
				H5Url,
				localUrl:null,
				fullUrl:null,
				height:'100%'
			};
		},
		mounted() {
			this.$nextTick(()=>{
				let curRoute = getCurrentPages()
				let urls = curRoute[curRoute.length - 1].$page.fullPath
				this.fullUrl='/\#' + (this.shareSrc?this.shareSrc:urls)
			})
			
			
			uni.onWindowResize(()=>{
				this.getSize();
			})
		},
		methods:{
			getSize(){
				 const systemInfo = uni.getSystemInfoSync()
			 let 	screenHeight = systemInfo.screenHeight
				// alert(screenHeight)
			},
			open(){
				this.getHeight()
			},
			getHeight(){
				let _this=this;
				uni.createSelectorQuery().in(this).select(".action").boundingClientRect((data) => {
					uni.getSystemInfo({
						success({
							windowHeight
						}) {
							_this.height=windowHeight-data.height
						}
					})
				}).exec()
			},
			
			close(){
				this.$emit('change',false)
			},
			showLoading(){
				uni.showLoading({
					title:"生成中"
				})
			},
			saveImage(res){
				let _this=this;
				base64ToPath(res).then(localUrls=>{
					let localUrl = this.shareSrc?this.shareSrc:localUrl
					this.localUrl = this.shareSrc?this.shareSrc:localUrl
					//#ifdef H5
					let a = document.createElement('a')
					a.setAttribute('download', `${_this.product.name}.png`)
					a.setAttribute('href', localUrl)
					document.body.appendChild(a);
					a.style.display = 'none'
					a.click()
					document.body.removeChild(a)
					//#endif
					//#ifndef H5
					console.log(localUrl)
					uni.saveImageToPhotosAlbum({
						filePath: localUrl,
						success() {
							uni.showToast({
								icon: "success",
								title: "保存成功"
							})
						},
						fail(err){
							_this.showError();
						}
					})
					//#endif
					
					
					uni.hideLoading()
				}).catch(e=>{
					this.showError()
				})
				
			},
			share(res){
				base64ToPath(res).then(localUrl=>{
					this.localUrl=localUrl
					let _this=this;
					uni.shareWithSystem({
						type:'image',
						summary:`欢迎注册${_this.appConfig.appName}`,
						href:`${_this.appConfig.h5_domain}/#/pages/login/register?content=${_this.userInfo.inviter_code}`,
						imageUrl:localUrl,
						success() {
							uni.hideLoading()
						},
						fail(err) {
							uni.hideLoading()
						}
					})
					uni.hideLoading()
				}).catch(e=>{
					this.showError()
				})
			},
			showError(err){
				uni.hideLoading()
				uni.showToast({
					icon:'none',
					title:"生成失败请稍后再试"
				})
			}
			
		}
	}
</script>



<script module='poster' lang='renderjs'>
import html2canvas from 'html2canvas'
export default {
	methods:{
		save(e, ownerVm) {
			let {action}=e.currentTarget.dataset
			ownerVm.callMethod('showLoading')
			const dom = document.getElementById('product-poster')
			html2canvas(dom, {
				width: dom.clientWidth,
				height: dom.clientHeight,
				scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
				scrollX: 0,
				scale: 5,
				dpi: 1000,
				imageTimeout:15000,
				useCORS: true,
			}).then((canvas)=>{
				ownerVm.callMethod(action, canvas.toDataURL('image/jpg'))
			}).catch(e=>{
				ownerVm.callMethod('showError')
				console.log("生成失败",e);
			})
		},
	}
}	
</script>

<style lang="scss">
	.action {
		position: fixed;
		padding-top: 24rpx;
		padding-left: 78rpx;
		padding-right: 78rpx;
		width: 750rpx;
		bottom: 0;
		left: 0;
		padding-bottom: calc(48rpx + env(safe-area-inset-bottom));
		// background: linear-gradient(180deg, #464C71 0%, #232748 100%);
		// background-size: 100vw 100vh;
		// background-position: bottom;
	}
	
	.price{
		font-family: HarmonyOS Sans SC-Bold, HarmonyOS Sans SC;
		font-weight: bold;
	}
	
	.bg{
		// background: linear-gradient(180deg, #464C71 0%, #232748 100%);
		// background-image: 
		background-size: 100vw 100vh;
		min-height: 100vh;
		width: 100%;
		background-color: $main-bg-color;
	}

	.share {
		width: 750rpx;
		// background: linear-gradient(180deg, #464C71 0%, #232748 100%);
		// background-size: 100vw 100vh;
		// background-position: top;
		&-container {
			padding-top: calc(var(--status-bar-height) + 52rpx);
			padding-left: 58rpx;
			padding-right: 58rpx;
			.poster {
				background-size: 100% auto;
				background-position: bottom;
			}
		}
	}
</style>
